﻿<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
             mc:Ignorable="d"
             x:Class="SilverlightWebcamEncoder.Controls.AnimatedRings"
             d:DesignWidth="609"
             d:DesignHeight="475">
    <UserControl.Resources>
        <Storyboard x:Name="RingGrow"
                    RepeatBehavior="Forever">
            <DoubleAnimation Duration="0:0:1"
                             To="500"
                             Storyboard.TargetProperty="(FrameworkElement.Width)"
                             Storyboard.TargetName="ellipse"
                             d:IsOptimized="True" />
            <DoubleAnimation Duration="0:0:1"
                             To="500"
                             Storyboard.TargetProperty="(FrameworkElement.Height)"
                             Storyboard.TargetName="ellipse"
                             d:IsOptimized="True" />
            <DoubleAnimation Duration="0:0:1"
                             To="0.892"
                             Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].(GradientStop.Offset)"
                             Storyboard.TargetName="ellipse"
                             d:IsOptimized="True" />
            <DoubleAnimation Duration="0:0:1"
                             To="0.647"
                             Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"
                             Storyboard.TargetName="ellipse"
                             d:IsOptimized="True" />
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                           Storyboard.TargetName="ellipse">
                <EasingDoubleKeyFrame KeyTime="0:0:0.6"
                                      Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:1"
                                      Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Loaded">
            <ei:ControlStoryboardAction Storyboard="{StaticResource RingGrow}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Grid x:Name="LayoutRoot">
        <Grid>
            <Ellipse x:Name="ellipse"
                     HorizontalAlignment="Center"
                     Height="10"
                     VerticalAlignment="Center"
                     Width="10"
                     StrokeThickness="0"
                     Fill="Red">
                <Ellipse.OpacityMask>
                    <RadialGradientBrush>
                        <GradientStop Color="#89000000"
                                      Offset="0.841" />
                        <GradientStop Offset="0.392" />
                        <GradientStop Offset="1" />
                    </RadialGradientBrush>
                </Ellipse.OpacityMask>
            </Ellipse>
        </Grid>
    </Grid>
</UserControl>